<template>
    <div class="page-container">
        <div class="header-container">
          <div class="header-title">阳光征收数据指挥中心</div>
        </div>
        <div class="main-container" :style="contentShow==true?'z-index:80;':'z-index:-80;'">
          <div class="left-container">
              <!--年度计划征收面积-->
              <div class="chart-item-wrapper">
                <AreaLine :year="activeYear" :activeArea="areaid"></AreaLine>
              </div>
              <!--计划启动比-->
              <div class="chart-item-wrapper gap-item">
                <CircleChart :year="activeYear" :activeArea="areaid"></CircleChart>
              </div>
            </div>
            <div class="middle-container">
              <div class="plan-area-container">
                <PlanArea :year="activeYear" :mode="activeMode" :activeArea="areaid"></PlanArea>
              </div>
              <div class="map-container">
                <AreaMap :year="activeYear" :activeArea="areaid"  @hasaread="getStartView"></AreaMap>
              </div>
            </div>
            <div class="right-container">
              <!--项目签约率-->
              <div class="chart-item-big-wrapper">
                <AreaProg :year="activeYear" :activeArea="areaid"></AreaProg>
              </div>
            </div>
        </div>

        <div v-show="contentShow" class="drapdown-container">
          <div class="drapdown-label">
            展示年份：
          </div>
          <div class="drapdown-wrapper" @mouseenter="enterDrapdown" @mouseleave="leaveDrapdown">
            <div class="drapdown-a">
              <span v-if="activeYear==''">全部</span>
              <span v-else>{{activeYear}}年</span>
              <Icon type="ios-arrow-down" color="#fff" size="18" style="margin-left:16px;"></Icon>
            </div>
            <div v-if="drapShow" class="drapdown-menu animated fadeIn">
                <div v-for="(item,key) in drapdownArr" :key="key" 
                class="drapdown-menu-item" @click="selectDrapdown(item)">
                  <div class="drapdown-menu-content">
                    <span v-if="item.value==''">全部</span>
                    <span v-else>{{item.value}}年</span>
                  </div>
                </div>
            </div>
          </div>
        </div>

        <div v-if="!contentShow" class="loading-container">
          <div class="demo-spin-icon-load">
            <span class="iconfont icon-jiazai" style="color:#fff;font-size:35px;"></span>
          </div>
        </div>
    </div>
</template>

<script>
import AreaLine from '../components/AreaLine'
import CircleChart from '../components/CircleChart'
import RectChart from '../components/RectChart'
import AreaProg from '../components/AreaProg'
import PlanArea from '../components/PlanArea'
import AreaMap from '../components/AreaMap'
import { getAllYear } from '@/api/index.js';
export default {
    name: '',
    components:{
      AreaLine,
      CircleChart,
      RectChart,
      AreaProg,
      PlanArea,
      AreaMap
    },
    data() {
        return {
            contentShow:false,
            activeMode:'area',
            drapShow:false,
            drapdownArr:[],
            activeYear:'',
            areaid:''
        }
    },
    created(){
      var params=this.$route.params;
      this.areaid=params.id;
      this.getNowYear();
    },
    mounted(){
        this.getYear();
    },
    methods: {
        getStartView(target){
          this.contentShow=target;
        },
        getNowYear(){
          var date = new Date();
          var year=date.getFullYear();
          this.activeYear=year+''
        },
        getYear(){
          var _this=this;
          getAllYear({
            front:0,
            sort:false
          }).then(res => {
                if(res.code==200){
                    var data=res.data;
                    _this.resetData(data);
                }
                return;
            }).catch(err => {
                console.log(err);
            });
        },
        resetData(data){
          var newArr=[
            {
              label:'全部',
              value:''
            }
          ];
          for(var i=0;i<data.length;i++){
            var item=data[i];
            var obj={
              label:item.value+'年',
              value:item.value+''
            }
            newArr.push(obj);
            if(i==data.length-1){
              this.drapdownArr=newArr;
            }
          }
        },
        enterDrapdown(){
          this.drapShow=true;
        },
        leaveDrapdown(){
          this.drapShow=false;
        },
        selectDrapdown(row){
          console.log(row);
          this.activeYear=row.value;
          this.drapShow=false;
        }
    }
}
</script>

<style scoped>
.page-container{
  width:100%;
  height:100vh;
  overflow: hidden;
  background:#081135;
}
.header-container{
  width:100%;
  height:101px;
  background-image: url(../assets/header.png);
  background-repeat: no-repeat;
  background-origin: center;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}
.header-title{
  font-size:34px;
  font-weight: 600;
  color:#fff;
  letter-spacing: 5px;
  position:relative;
  top:8px;
  text-align:center;
}
.main-container{
  width:calc(100% - 58px);
  height: calc(100vh - 138px);
  display: flex;
  margin:0 auto;
  margin-top:14px;
  position:relative;
}
.loading-container{
  width:100%;
  height: calc(100vh - 138px);
  display: flex;
  align-items:center;
  justify-content: center;
  position:absolute;
  top:110px;
  left:0px;
  z-index:100;
}
.left-container{
  flex:3;
  height:100%;
  display:flex;
  flex-direction: column;
}
.middle-container{
  flex:4;
  height:100%;
  display: flex;
  flex-direction: column;
}
.right-container{
  flex:3;
  height:100%;
  display:flex;
  flex-direction: column;
}
.chart-item-wrapper{
  width:100%;
  flex:1;
  height:0px;
  background-image: url(../assets/border.png);
  background-size: 100% 100%;
}
.chart-item-big-wrapper{
  width:100%;
  flex:1;
  height:0px;
  background-image: url(../assets/border-bg.png);
  background-size: 100% 100%;
}
.gap-item{
  margin-top:6px;
}
.plan-area-container{
  height:150px;
}
.map-container{
  flex:1;
}
.drapdown-container{
  position: absolute;
  left:56px;
  top:60px;
  display: flex;
  z-index:120;
}
.drapdown-label{
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height:47px;
}
.drapdown-wrapper{
  position:relative;
}
.drapdown-a{
  display:inline-block;
  color:#fff;
  width:142px;
  height:47px;
  background:rgb(15,38,106);
  border-radius:50px;
  text-align: center;
  line-height:47px;
  font-size:18px;
  border:solid 1px rgb(21,73,161);
  cursor: pointer;
}
.drapdown-menu{
  width: 107px;
  background: #041742;
  box-shadow: 0px 2px 4px 2px #0F3173;
  border-radius: 2px;
  opacity: 0.86;
  border: 1px solid #164DAA;
  margin:0 auto;
  margin-top:10px;
}
.drapdown-menu-item{
  text-align:center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 20px;
  margin:6px 0px 6px 0px;
}
.drapdown-menu-content{
  width:99px;
  margin:0 auto;
  padding:1px 0px 1px 0px;
}
.drapdown-menu-content:hover{
  cursor: pointer;
  background: #2662C2;
  border-radius: 2px;
}
@keyframes theanimation{ 
  from {height:0%;} 
  to {height:100%;}
}

.drap-move{
    animation:theanimation 2s ease alternate; 
    -webkit-animation:theanimation 2s ease alternate ; 
    -moz-animation:theanimation 2s ease alternate ; 
    -o-animation:theanimation 2s ease alternate ; 
    -ms-animation:theanimation 2s ease alternate ; 
}

.demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
}
</style>


